<template>
  <div class="page-content">
    <div v-if="userInfo.showRN == 61" class="page" :style="{backgroundImage: `url(${require('@/assets/haoyunqi.png')})`}" />
    <!-- 太原首页暂时为空 -->
    <div v-if="userInfo.showRN == 52" class="page" :style="{backgroundImage: `url(${require('@/assets/home-ty.jpg')})`}" />
    <template v-else>
      <iframe
        :id="iframe.id[0]"
        :ref="refData[0]"
        :src="iframe.src[0]"
        style="z-index: 99999;"
        width="100%"
        height="100%"
        frameborder="0"
        scrolling="auto"
      />
      <template v-if="visible">
        <el-drawer
          :title="titleName"
          :visible.sync="visible"
          min-width="1024px"
          size="92%"
          class="client-drawer-content"
          append-to-body
          :with-header="false"
          @close="reset"
        >
          <template #default>
            <div class="title">
              <span class="title-icon" />
              <span class="title-text"><h4>{{ titleName }}</h4></span>
            </div>
            <iframe
              :id="iframe.id[1]"
              :ref="refData[1]"
              :src="iframe.src[1]"
              width="100%"
              height="90%"
              frameborder="0"
              scrolling="auto"
            />
          </template>
        </el-drawer>
      </template>
    </template>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'home',
    data() {
      return {
        visible: false,
        key: new Date().getTime(),
        titleName: '',
        refData: ['client-iframe', 'client-iframe-2'],
        box: {
          id: 'box-content'
        },
        iframe: {
          id: ['iframe-content', 'iframe-content-drawer'],
          src: [process.env.VUE_APP_SERVER_URL + 'preview?bizModel=1', '']
        },
        messageEvent: null
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    created() {
      this.initContent()
    },
    mounted() {
      this.initContent()
      this.initEventListener()
    },
    methods: {
      initEventListener() {
        window.addEventListener('message', (messageEvent) => {
          console.log('messageEvent===>>>', messageEvent)
          this.initMessageData(messageEvent)
          this.sendRevData(messageEvent.data)
        })
      },
      initMessageData(messageEvent) {
        this.titleName = ''
        this.iframe.src[1] = ''
        if (messageEvent.data.nodes && messageEvent.data.nodes.title && messageEvent.data.nodes.url) {
          this.visible = true
          this.titleName = messageEvent.data.nodes.title
          if (!this.checkURL(messageEvent.data.nodes.url)) {
            this.iframe.src[1] = (messageEvent.data.nodes.url && messageEvent.data.nodes.url.length > 0) ? process.env.VUE_APP_SERVER_URL + messageEvent.data.nodes.url : process.env.VUE_APP_SERVER_URL
          } else {
            this.iframe.src[1] = messageEvent.data.nodes.url
          }
          if (this.iframe.src[1] && this.iframe.src[1].length > 0) {
            this.iframe.src[1] = (this.iframe.src[1].indexOf('?') !== -1) ? this.iframe.src[1] + '&_key=' + new Date().getTime() : this.iframe.src[1] + '?_key=' + new Date().getTime()
          }
          console.log(this.iframe)
          this.messageEvent = messageEvent
        }
      },
      checkURL(URL) {
        var str = URL
        var Expression = /(http|https):\/\/\S*/
        var objExp = new RegExp(Expression)
        if (objExp.test(str) === true) {
          return true
        } else {
          return false
        }
      },
      initContent() {
      },
      reset() {
        // if (this.messageEvent != null) {
        //   document.getElementById(this.iframe.id[0]).contentWindow.location.reload(true)
        //   window.parent.postMessage(this.messageEvent, '*')
        //   this.initMessageData(this.messageEvent)
        // }
        this.visible = false
        // window.location.reload()
      },
      sendRevData(data) {
        const mapFrame = document.getElementById(this.iframe.id[0])
        const iframeWin = mapFrame.contentWindow
        const _self = this
        var info = {
          'localStorage': localStorage.tp
        }
        data['messages'] = {
          info: info,
          iframe: _self.iframe.id[1]
        }
        iframeWin.postMessage(
          data,
          '*'
        )
        this.$nextTick(() => {
          var iframe = document.getElementById(_self.iframe.id[1])
          if (iframe) {
            iframe.onload = function() {
              console.log('====>>>>iframe', iframe)
              iframe.contentWindow.postMessage(JSON.stringify(info), '*')
            }
          }
        })
      }
    }
    // created() {
    //   const info = { sn: 5, p5: 17704869005 }
    //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
    //   setTimeout(() => {
    //     const info = { sn: 5, p5: 17704869001 }
    //     this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
    //   }, 5000)
    //   setTimeout(() => {
    //     const info = { sn: 5, p5: 17704869002 }
    //     this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
    //   }, 10000)
    //   setTimeout(() => {
    //     const info = { sn: 5, p5: 17704869003 }
    //     this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
    //   }, 15000)
    //   setTimeout(() => {
    //     const info = { sn: 5, p5: 17704869005 }
    //     this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
    //   }, 20000)
    // }
  }
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  background-image: url("../../../src/assets/meiqiduo.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50% auto;
}
#iframe-content {
  /* max-height: 600px; */
  height: calc(100% - 5px);
  overflow-y: hidden;
}
.page-content {
  height: calc(100% - 0px);
}
body {
  margin: 0;
  overflow: hidden;
}
.app-container .app-main .app-main-in {
  position: relative;
  height: calc(100% - 4px);
}

/* .app-main-wrapper{ */

/*  overflow-y: hidden; */

/* } */
.client-drawer-content {
  width: 100%;
}

/deep/ .el-drawer.rtl {
  padding: 5px 8px;
}
</style>
